<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="金额" >
        <el-input v-model="form.count" style="width: 230px"></el-input>*
      </el-form-item>

      <el-form-item label="时间">
<!--        <el-col :span="11">-->
<!--          <el-date-picker type="date" placeholder="选择日期" v-model="form.outputDate" style="width: 230px;"></el-date-picker>-->
<!--        </el-col>-->
<!--        <el-col class="line" :span="2">-</el-col>-->
<!--        <el-col :span="11">-->
<!--          <el-time-picker placeholder="选择时间" v-model="time" style="width: 100%;"></el-time-picker>-->
<!--        </el-col>-->
        <el-date-picker
            v-model="form.date"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            align="right"
            :picker-options="pickerOptions">
        </el-date-picker>*
      </el-form-item>


      <el-form-item label="种类">
        <el-select
            v-model="form.kind"
            placeholder="请选择种类"
        >
          <el-option
            v-for="kind in kinds"
            :key="kind.kindName"
            :label="kind.kindName"
            :value="kind.kindName"></el-option>
        </el-select>*
        <el-switch
            v-model="flag"
            active-text="收入"
            active-value="1"
            inactive-text="支出"
            inactive-value="2"
            @change="getFlag($event)"
        ></el-switch>
      </el-form-item>

      <el-form-item label="支付方式">
        <el-select v-model="form.method" placeholder="请选择支付方式" @change="getMethod">
          <el-option label="现金" value="现金"></el-option>
          <el-option label="微信" value="微信"></el-option>
          <el-option label="支付宝" value="支付宝"></el-option>
          <el-option label="花呗" value="花呗"></el-option>
        </el-select>*


      </el-form-item>

      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.text" style="width: 230px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="insertOutput">提交</el-button>
        <router-link to="/output"> <el-button>取消</el-button> </router-link>
      </el-form-item>
    </el-form>
<!--    <button v-on:click="getNowTime">??</button>-->

  </div>
</template>

<script>
export default {
  name: "insertOutput",
  data(){
    return {
      kinds:'',
      pay:'',
      flag:2,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },//时间快捷选项
      time:'',
      form: {
        count:'',
        date:'',
        id:1,
        kind:'',
        method:'',
        text:'',
        flag:'2'
      },
      outputData: {
          count:10.0,
          date:'2020-11-5',
          id:1,
          kind:'零食',
          method:'支付宝',
          text:'血赚',
          flag:'2'
        },
    }
  },
  methods:{
    getFlag(){
      let flag=this.flag.valueOf()
      if(flag==1){
        console.log('收入')
        this.form.flag=2
      }else {
        console.log('支出')
        this.form.flag=1
      }
      const _this=this;
      axios.get('http://localhost:9090/kind/findAll/'+flag).then(function (resp){
        let jsonObj = JSON.parse(JSON.stringify(resp.data));
        console.log(jsonObj)
        _this.kinds=resp.data;
      })
      _this.form.kind=''
    },
    getNowTime() {
      //只有年月日
      // let now = new Date();
      // let year = now.getFullYear(); //得到年份
      // let month = now.getMonth(); //得到月份
      // let date = now.getDate(); //得到日期
      // let hour =" 00:00:00"; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
      // month = month + 1;
      // month = month.toString().padStart(2, "0");
      // date = date.toString().padStart(2, "0");
      // let defaultDate = `${year}-${month}-${date}`;
      // console.log(defaultDate)
      // return defaultDate;
      // this.$set(this.info, "stockDate", defaultDate);
    },
    getMethod(){
      return this.form.outputMethod
    },
    insertOutput(){
      let input=this.form
      let commit=0//判断是否能提交
      let msg=''
      if(input.kind==null||input.kind==""){
        commit=1
        msg=msg+"种类  "
      }
      if(input.count==null||input.count==""){
        commit=1
        msg=msg+"金额  "
      }
      if(input.date==null||input.date==""){
        commit=1
        msg=msg+"时间  "
      }
      if(input.method==null||input.method==""){
        commit=1
        msg=msg+"支付方式  "
      }
      if(commit==1){
        this.$alert('傻逼东西,该填不填:'+msg, '错误!!!', {
          confirmButtonText: '知道了',
          callback: action => {
            this.$message({
              type: 'info',
              message: `记得填`
            });
          }
        });
      }
      if(commit==0){
        axios({
          url: "http://localhost:9090/bookkeeping/insert",
          data: this.form,
          method:'post',
          //ajax
          // dataType: "JSON",
          // type: "post",
          // contentType: ‘application/json;charset=UTF-8‘, //不能加
          // success: function (msg) {
          //   console.log(msg)
          // }
        })
            .then(function (resp){
              console.log(resp)
            })
            .catch(function (error){
              console.log(error)
            })
        // this.$router.push({
        //   path: '/output',
        //   name: 'Output'
        // })
      }

    }
  },
  created() {
    this.getFlag()
  },
  mounted:function (){
    this.outputDatas=this.$route.params.msgKey
    console.log(this.outputDatas)
  },
}
</script>

<style scoped>

</style>